<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        标题：<span>{{ item.title }}</span> 内容：<span>{{ item.content }}</span>
        <button @click="updatePage(item)">编辑</button>
        <button @click="deletePage(item.id)">删除</button>
      </li>
    </ul>
    <!-- 编辑框 -->
    <el-dialog v-model="dialogFormVisible" title="编辑内容" width="500">
      <el-form :model="form">
        <el-form-item label="标题">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="是否公开">
          <el-switch v-model="form.gongkai" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.content" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import http from '../help/http'
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
let list = ref([])
const dialogFormVisible = ref(false)
const form = reactive({
  id: 0,
  title: '',
  content: '',
  gongkai: false
})

function loadlist() {
  http({
    method: 'get',
    url: '/posts'
  }).then((r) => {
    list.value = r.data
  })
}
loadlist()

//更新页面
function updatePage(item) {
  dialogFormVisible.value = true
  form.id = item.id
  form.title = item.title
  form.content = item.content
  form.gongkai = item.status
}

//删除
function deletePage(id) {
  ElMessageBox.confirm('你确定要删除吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      http({
        url: '/posts/' + id,
        method: 'delete'
      }).then((r) => {
        console.log(r.data)
        loadlist()
      })
    })
    .catch(() => {})
}

//提交修改按钮
function onSubmit() {
  http({
    url: '/posts/' + form.id,
    method: 'patch',
    data: {
      title: form.title,
      content: form.content,
      status: form.gongkai
    }
  }).then((r) => {
    console.log(r)
    dialogFormVisible.value = false
    loadlist()
  })
}
</script>

<style lang="scss">
ul {
  width: 100%;
  max-width: 600px;
  margin: 0 50%;
  padding: 0;
  list-style: none;

  li {
    width: 100%;
    padding: 15px;
    background-color: #f4f4f4;
    color: #333;
    text-align: left;
    line-height: 1.5;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    span {
      flex: 1;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }

    button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: #0056b3;
      }

      &:last-child {
        background-color: #dc3545;
        margin-left: 5px;

        &:hover {
          background-color: #c82333;
        }
      }
    }
  }
}
</style>
